<template>
  <div>
      <!-- 文章页{{$route.params}} -->
      <van-nav-bar :title="article.type===1? '文章详情' : '视频'" class="header" @click-left="$router.back()">
        <template #left >
          <van-icon name="arrow-left" class="arrow-left"/>
          <i class="iconfont iconnew"></i>
        </template>
        <template #right>
          <van-button
            round
            :type="article.has_follow?'default':'danger'"
            size="mini"
            @click="followBtn"
          >{{article.has_follow? '已关注':'关注'}}</van-button>
        </template>
      </van-nav-bar>
      <div v-if="article.type===1" class="artcle-main">
           <h1 class="title">{{ article.title }}</h1>
      <!-- 🔔 && 如果左值为 true 值，继续往后运行，后面的就是数据 -->
      <p class="author">
        {{ article.user && article.user.nickname }} 
        {{ article.create_date |formatDate}}
      </p>
      <!-- 🔔 v-html 用于展示 HTML 布局 -->
      <article
        class="article-in"
        v-html="article.content"
      ></article>
      </div>
      <!-- 2.2 视频内容 -->
    <div v-else  class="video-main" >
      <!-- 2.2.1 视频 -->
      <div class="video-group">
        <!-- 
          PS: 梨视频网站的视频大家可以谁便拿(会审查元素就行)
            1. poster     封面照骗  
            2. src        视频播放真实地址
            3. controls   操作栏()
        -->
        <video 
           class="video" 
           :poster="article.cover&&article.cover[0].url"
           :src="'https://video.pearvideo.com/mp4/third/20210702/cont-1734086-10054243-203058-hd.mp4'" 
        ></video>
        <i class="iconfont iconshipin"></i>
      </div>
      <div class="userinfo">
        <van-image 
            class="avatar" 
            round 
            :src="article.user&&article.user.head_img | imgUrl" 
        ></van-image>
        <span class="nickname">{{article.user&&article.user.nickname}}</span>
        <van-button
          round
          :type="article.has_follow ? 'default':'danger' "
          size="mini"
          @click="followBtn"
        >{{ article.has_follow ? '已关注' : '+ 关注' }}</van-button>
      </div>
    </div>
      <!-- 点赞和分享操作 -->
      <div class="operate">
        <div class="btn" @click="likeFn" :class="{active : article.has_like} ">
          <i class="iconfont icondianzan"></i>
          <span>{{article.like_length}}</span>
        </div>
        <div class="btn" >
          <i class="iconfont iconweixin"></i>
          <span>微信</span>
        </div>
      </div>
      <Mycomment :article="article"></Mycomment>
  </div>
</template>

<script>
import {getPostDetailByIdAPI} from'../apis/news'
import { userFollowsByAPI } from '../apis/user';
import { userUnFollowsByAPI } from '../apis/user';
import {updatePostLikeByIdAPI} from '../apis/news'
import Mycomment from'../components/Mycomment.vue'

export default {
    data () {
      return {
        // 为了方便，把路由的 id 存起来
         id: this.$route.params.id,
         // 文章对象
         article: {},
      }
    },
    components: {
      Mycomment,
    },
    // 组件初始化完成
  async created() {
    // 根据 id 获取文章详情
    const res = await getPostDetailByIdAPI(this.id);
    console.log(res);
    // 数据绑定，用于页面展示数据
    this.article = res.data.data;
  },
  methods: {
    async followBtn(){
      if(this.article.has_follow){
        const res = await userUnFollowsByAPI(this.article.user.id)
        console.log(111,res)
        this.$toast.fail(res.data.message)
      }else{
        const res = await userFollowsByAPI(this.article.user.id)
        console.log(222,res)
        this.$toast.success(res.data.message)
      }
      // 🔔 由于页面没有刷新，所以需要主动修改 Vue 绑定的数据
      this.article.has_follow=!this.article.has_follow
      
    },
    async likeFn(){
        const res = await updatePostLikeByIdAPI(this.article.id)
        // console.log(3,res)
        if(res.data.message === "点赞成功"){
          this.article.like_length++;
          this.$toast.success(res.data.message)
        }else{
          this.article.like_length--
          this.$toast.fail(res.data.message)
        }
        this.article.has_like=!this.article.has_like
    },
  }
}
</script>

<style lang="less" scoped>
// 没有添加 scoped 表示全局样式
//  添加了 scoped 后，到底做了什么事情？？
//     1. 模板中标签自动添加 => <标签名 data-v-xxx class="box">
//     2. 选择器自动添加 => .box[data-v-82768ea8]
.header {
  .arrow-left {
    font-size: 20px;
    color: #000;
  }
  .iconnew {
    font-size: 50px;
  }
}
.artcle-main {
  padding: 10px;
  .title{
    font-size:16px;
    font-weight:bold;
    margin:10px;
  }
  .author{
    font-size:13px;
    margin-bottom: 20px;
    color: #666;
  }
   // 添加了 /deep/ 后，当前选择器和其后代选择器，都不会添加 [data-v-xxx] 了
  /deep/ .article-in {
    font-size: 13px;
    img {
      width: 100%;
    }
    p {
      text-indent: 2em;
      line-height: 1.5;
      margin: 0.2em;
    }
    .photo{
      text-align: center;
    }
  }

}
.operate{
  display: flex;
  justify-content: space-around;
  align-items: center;
  height:100px;
  .btn{
    width: 80px;
    height:30px;
    border: 1px solid #ccc;
    border-radius: 15px;
    display: flex;
    justify-content: center;
    align-items: center;
    .iconweixin{
      color: green;
    }
  }
  .active{
    border-color:green;
    color:green;
  }
}
// 视频页面
.video-main {
  .video-group {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    .video {
      width: 100%;
      height: 300px;
      background-color: #666;
    }

    .iconshipin {
      font-size: 50px;
      color: #fff;
      width: 60px;
      height: 60px;
      border-radius: 50%;
      background-color: rgba(0, 0, 0, 0.5);
      position: absolute;
      z-index: 1;
      display: flex;
      justify-content: center;
      align-items: center;
    }
  }
  .userinfo {
    display: flex;
    height: 50px;
    align-items: center;
    padding: 10px;
    .avatar {
      width: 25px;
      height: 25px;
      margin-right: 10px;
    }
    .nickname {
      flex: 1;
    }
  }
}
</style>